﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Test.aspx.cs" Inherits="Test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta charset="utf-8" />
    <title>Metronic | Form Stuff - Advance Form Samples</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <%--<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/style-metro.css" rel="stylesheet" type="text/css"/>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
    
	<link href="css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="css/default.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="css/uniform.default.css" rel="stylesheet" type="text/css"/>--%>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <%--<link rel="stylesheet" type="text/css" href="css/select2_metro.css" />--%>
    <!-- END PAGE LEVEL SCRIPTS -->
    <link rel="shortcut icon" href="favicon.ico" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <a href="#" onclick="closeme();">Add New Div Data</a>
    <div class="outerDiv">
        innerdata
        <div class="innerDiv">
            outerdata</div>
        <div class="portlet-body">
            <div class="tabbable  portlet-tabs">
                <ul class="nav nav-tabs ulTab" style="background-color: Yellow;">
                    <li class="liMerchantInfo"><a href="#portlet_tab3" data-toggle="tab"><span class="merchantHeading">
                        Merchant Info3</span> </a></li>
                    <li class="active "><a href="#portlet_tab2" class="liMerchantList" data-toggle="tab">
                        MerchantList2</a></li>
                    <li class="liMerchantInfo"><a  href="#portlet_tab1" data-toggle="tab"><span class="merchantHeading">
                        Merchant Info1</span> </a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane  panel1" id="portlet_tab1">
                        <div class="portlet box " style="background-color: #eee;">
                            <div class="portlet-title">
                                <div class="caption" style="color: Black!important;">
                                    <i class="icon-globe"></i>Merchant List1</div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover table-full-width" id="Table1">
                                    <thead>
                                        <tr>
                                            <th>
                                                Name
                                            </th>
                                            <th>
                                                BusinessName
                                            </th>
                                            <th>
                                                EmailId
                                            </th>
                                            <th>
                                                MobileNo
                                            </th>
                                            <th class="hidden-480">
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <asp:Repeater ID="Repeater1" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <td>
                                                        <%# Eval("Name")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("BusinessName")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Email")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Mobile")%>
                                                    </td>
                                                    <td>
                                                        <center>
                                                            <%-- <asp:HiddenField runat="server" ID="hdf" Value='<%# Eval("Id") %>' />
                                                                            <asp:LinkButton runat="server" ID="btnView" Text="View" CommandArgument='<%# Eval("ID") %>'
                                                                                OnClientClick="BindInfo(this)" OnClick="OnView"></asp:LinkButton>--%>
                                                            <a href="#" onclick="BindInfo('<%# Eval("Id")  %>')">view</a>
                                                        </center>
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane active panel2" id="portlet_tab2">
                        <div class="portlet box " style="background-color: #eee;">
                            <div class="portlet-title">
                                <div class="caption" style="color: Black!important;">
                                    <i class="icon-globe"></i>Merchant List2</div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
                                    <thead>
                                        <tr>
                                            <th>
                                                Name
                                            </th>
                                            <th>
                                                BusinessName
                                            </th>
                                            <th>
                                                EmailId
                                            </th>
                                            <th>
                                                MobileNo
                                            </th>
                                            <th class="hidden-480">
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <asp:Repeater ID="rptMerchant" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <td>
                                                        <%# Eval("Name")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("BusinessName")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Email")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Mobile")%>
                                                    </td>
                                                    <td>
                                                        <center>
                                                            <%-- <asp:HiddenField runat="server" ID="hdf" Value='<%# Eval("Id") %>' />
                                                                            <asp:LinkButton runat="server" ID="btnView" Text="View" CommandArgument='<%# Eval("ID") %>'
                                                                                OnClientClick="BindInfo(this)" OnClick="OnView"></asp:LinkButton>--%>
                                                            <a href="#" onclick="BindInfo('<%# Eval("Id")  %>')">view</a>
                                                        </center>
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane active panel3" id="portlet_tab3">
                        <div class="portlet box " style="background-color: #eee;">
                            <div class="portlet-title">
                                <div class="caption" style="color: Black!important;">
                                    <i class="icon-globe"></i>Merchant List3</div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover table-full-width" id="Table2">
                                    <thead>
                                        <tr>
                                            <th>
                                                Name
                                            </th>
                                            <th>
                                                BusinessName
                                            </th>
                                            <th>
                                                EmailId
                                            </th>
                                            <th>
                                                MobileNo
                                            </th>
                                            <th class="hidden-480">
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <asp:Repeater ID="Repeater2" runat="server">
                                            <ItemTemplate>
                                                <tr>
                                                    <td>
                                                        <%# Eval("Name")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("BusinessName")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Email")%>
                                                    </td>
                                                    <td>
                                                        <%# Eval("Mobile")%>
                                                    </td>
                                                    <td>
                                                        <center>
                                                            <%-- <asp:HiddenField runat="server" ID="hdf" Value='<%# Eval("Id") %>' />
                                                                            <asp:LinkButton runat="server" ID="btnView" Text="View" CommandArgument='<%# Eval("ID") %>'
                                                                                OnClientClick="BindInfo(this)" OnClick="OnView"></asp:LinkButton>--%>
                                                            <a href="#" onclick="BindInfo('<%# Eval("Id")  %>')">view</a>
                                                        </center>
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="row-fluid">
            <div class="span12">
                <!-- BEGIN BASIC CHART PORTLET-->
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Basic Chart</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                    class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_1" class="chart">
                        </div>
                    </div>
                </div>
                <!-- END BASIC CHART PORTLET-->
                <!-- BEGIN TRACKING CURVES PORTLET-->
                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Tracking Curves</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                    class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_3" class="chart">
                        </div>
                    </div>
                </div>
                <!-- END TRACKING CURVES PORTLET-->
                <!-- BEGIN DYNAMIC CHART PORTLET-->
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Dynamic Chart</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                    class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_4" class="chart">
                        </div>
                    </div>
                </div>
                <!-- END DYNAMIC CHART PORTLET-->
                <!-- BEGIN STACK CHART CONTROLS PORTLET-->
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Stack Chart Controls</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                    class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_5" style="height: 350px;">
                        </div>
                        <div class="btn-toolbar">
                            <div class="btn-group stackControls">
                                <input type="button" class="btn blue" value="With stacking" />
                                <input type="button" class="btn red" value="Without stacking" />
                            </div>
                            <div class="space5">
                            </div>
                            <div class="btn-group graphControls">
                                <input type="button" class="btn" value="Bars" />
                                <input type="button" class="btn" value="Lines" />
                                <input type="button" class="btn" value="Lines with steps" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END STACK CHART CONTROLS PORTLET-->
                <!-- BEGIN INTERACTIVE CHART PORTLET-->
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Interactive Chart</div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse"></a><a href="#portlet-config" data-toggle="modal"
                                class="config"></a><a href="javascript:;" class="reload"></a><a href="javascript:;"
                                    class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div id="chart_2" class="chart">
                        </div>
                    </div>
                </div>
                <!-- END INTERACTIVE CHART PORTLET-->
            </div>
        </div>
        <!-- END CHART PORTLETS-->
        <!-- BEGIN PIE CHART PORTLET-->
        <div class="row-fluid">
            <div class="span6">
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Default</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Default Pie with Legend.</h4>
                        <div id="pie_chart" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box purple">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph1</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Default Pie without Legend</h4>
                        <div id="pie_chart_1" class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph2</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Added a semi-transparent background to the labels and a custom labelFormatter function.</h4>
                        <div id="pie_chart_2" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph3</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Slightly more transparent label backgrounds and adjusted the radius values to place
                            them within the pie.</h4>
                        <div id="pie_chart_3" class="chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PIE CHART PORTLET-->
        <!-- BEGIN PIE CHART PORTLET-->
        <div class="row-fluid">
            <div class="span6">
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph4</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Semi-transparent, black-colored label background.</h4>
                        <div id="pie_chart_4" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box purple">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph5</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Semi-transparent, black-colored label background placed at pie edge.</h4>
                        <div id="pie_chart_5" class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph6</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Added a semi-transparent background to the labels and a custom labelFormatter function.</h4>
                        <div id="pie_chart_6" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph7</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            Labels can be hidden if the slice is less than a given percentage of the pie (10%
                            in this case).</h4>
                        <div id="pie_chart_7" class="chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PIE CHART PORTLET-->
        <!-- BEGIN PIE CHART PORTLET-->
        <div class="row-fluid">
            <div class="span6">
                <div class="portlet box yellow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph8</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            The radius can also be set to a specific size (even larger than the container itself).</h4>
                        <div id="pie_chart_8" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box purple">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph9</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            The pie can be tilted at an angle.</h4>
                        <div id="pie_chart_9" class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph10</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            A donut hole can be added.</h4>
                        <div id="donut" class="chart">
                        </div>
                    </div>
                </div>
                <div class="portlet box red">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-reorder"></i>Graph11</div>
                        <div class="tools">
                            <a href="#portlet-config" data-toggle="modal" class="config"></a><a href="javascript:;"
                                class="reload"></a>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <h4>
                            The pie can be made interactive with hover and click events.</h4>
                        <div id="interactive" class="chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <asp:TextBox runat="server" ID="hdfCount" Style="display: none;" class="hiddenValue1"
        Text="3">
    </asp:TextBox>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.resize.js"></script>
    <script src="js/jquery.flot.pie.js"></script>
    <script src="js/jquery.flot.stack.js"></script>
    <script src="js/jquery.flot.crosshair.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="js/charts.js"></script>
    <script>
        jQuery(document).ready(function () {
            // initiate layout and plugins

            Charts.init();
            Charts.initCharts();
            Charts.initPieCharts();
        });
    </script>
    <script>
        function jayjalaram() {
            alert('jay jalaram');
      


            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "./Test.aspx/LoadInfo",
                data: "{Id:9}",
                dataType: "json",
                success: function (Result) {
                    e = parseInt($('.hiddenValue1').val());
                    d = e + 1;

                    $('.hiddenValue1').val(d.toString());
                    $('.innerDiv').append("inner data1</br>");
                    $('.outerDiv').append("outer data1</br>");
                    $('.innerDiv').append("inner data1 &nbsp; ");
                    $('.outerDiv').append("outer data1 &nbsp;");
                    $('.ulTab').append(" <li class='liMerchantInfo" + d + "'><a href='#portlet_tab" + d + "'data-toggle='tab'><span class='merchantHeading'>" + Result.d[0]+ "</span> </a></li>");
                    //$('.tab-content').append("<div class='tab-pane active panel" + d + "' id='portlet_tab" + d + "'>jay jalaram" + d + ",jay matadi" + d + "</div>");
                    var portlateTab = '#portlet_tab' + d;
                    $('.tab-content').append("<div class='tab-pane active panel" + d + "' id='portlet_tab" + d + "'><div class='span6'><div style='padding-left: 15px;'><h3>Merchant Information</h3><div class='row-fluid row' style='padding-left: 25px;'><label style='font-size: 13px; text-transform: uppercase;' class='businessName'></label><label  style='margin-top: 20px;' class='address1'>Address1</label><label  class='address2'>ddress2</label><label><label class='city'>ahmedabad</label><label  class='pincode'>380013</label></label> <label>India:</label><label class='mobileNo'>India:</label></div></div></div>")

                    $('.active').removeClass("active");
                    var li = '.liMerchantInfo' + d;
                    var panel = '.panel' + d;
                    var tab = "#portlet_tab" + d;
                    alert();
                    $(li).addClass("active");
                    $(panel).addClass("active");
                    alert(Result.d[0]);
                    $(tab + ' .businessName').html(Result.d[0] + ' (' + Result.d[12] + ')');
                   // $('.businessName').html( + ' (' + Result.d[12] + ')');
                    $(tab + ' .lastLoginDate').html(Result.d[1]);
                    $(tab + ' .emailId').html(Result.d[2]);
                    $(tab + ' .address1').html(Result.d[3]);
                    $(tab + ' .address2').html(Result.d[4]);
                    $(tab + ' .city').html(Result.d[5]);
                    $(tab + ' .pincode').html(Result.d[6]);
                },
                error: function (Result) {
                    alert("Error");
                }
            });

        }
        function closeme() {
            alert('jay jalaram');
            alert('close me');
        }
    </script>
</asp:Content>
